<template>
    <view class="category-container">
        <MidLayout>
           
               
            <IndexTitle right-text="查看全部" zh_text="视频中心" en_text="Video Center" @handleRightText="navigateVideocenter"></IndexTitle>


            <view>
                 <view>
                    <Channel  :ishorizontal="true" :channel-id="random_channel?.channel_id"
                        :channel-video-id="random_channel?.channel_video_id"
                        :autoplay="random_channel?.auto_play == 1 || false" :muted="true"
                        :loop="random_channel?.loop == 1 || false">
                    </Channel>
                </view>

                <!-- <view v-if="settingStore.setting?.random_channel?.open_type != 1">
                    <Channel :channel-id="settingStore.setting?.channel_id"
                        :channel-video-id="settingStore.setting?.channel_video_id"
                        :autoplay="settingStore.setting?.auto_play == 1 || false" :muted="true"
                        :loop="settingStore.setting?.loop == 1 || false">
                    </Channel>
                </view>
                <video v-else :src="settingStore.setting?.random_channel.video_url" autoplay="true"
                    muted="true" style="width: 100%;" @click="naviagteScroll(settingStore.setting?.random_channel?.id)"></video> -->

            </view>


            
            <IndexTitle right-text="查看全部" zh_text="工艺工法" en_text="Crafting Methods and Techniques" @handleRightText="navigateVideolist"></IndexTitle>



            <view>
                 <view>
                    <Channel :isvertical="true" :channelId="random_video_list_channel?.channel_id"
                        :channelVideoId="random_video_list_channel?.channel_video_id"
                        :autoplay="random_video_list_channel?.auto_play == 1 || false" :muted="true"
                        :feedToken="random_video_list_channel?.feed_token"
                        :loop="random_video_list_channel?.loop == 1 || false">
                    </Channel>
                </view>


            </view>


            <!-- <view class="cover">

                <up-image
                class="cover-image"
                height="200rpx"
                mode="aspectFill"
                width="100%"
                :src="settingStore.setting.cover_url"

                @tap="navigateVideocetner">

                </up-image>
            </view> -->
        </MidLayout>
    </view>
</template>
<script setup lang="ts">
import { defineProps, ref } from 'vue'
import { useSettingStore } from '@/store/setting'
import IndexTitle from '@/pages/walls/index-title.vue'

const settingStore = useSettingStore()


defineProps(['random_video_list_channel','random_channel'])

const baseStyles = ref({
    height:'394rpx'
})
const naviagteScroll = (id:Number) => {
    uni.navigateTo({
        url: `/pages/video-center/scroll?id=${id}`
    })
}

const navigateVideocenter = () => {
    uni.navigateTo({
        url: '/pages/video-center/index'
    })
}

const navigateVideolist = () => {
    uni.navigateTo({
        url: '/pages/video-list/index'
    })
}


</script>

<style scoped lang="scss">
.cover {
    width: 100%;
    background-color: #ccc;
    border-radius: 14rpx;
    background-position: center;
    background-size: contain;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    overflow: hidden;

    .cover-image {
        width: 100%;
    }
}

.image {
    height: 270rpx;
    background-color: #ccc;
    border-radius: 14rpx;
    background-position: center;
    background-size: contain;
}

.category-container {
    .title {
        padding-bottom: 20rpx;
        position: relative;

        .zh {
            font-size: 32rpx;
            font-weight: 700;
            margin-bottom: 8rpx;
        }

        .en1 {

            position: absolute;
            right: 0;
            top: 30rpx;
            font-size: 24rpx;
            font-weight: 700;
            color: #999;

        }

        .en {
            $locale-size: 22rpx;
            font-size: 16rpx;
            font-weight: 200;
            height: $locale-size;
            line-height: $locale-size;
        }
    }

    .grid {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
}
</style>
